<template>
  <div class="body">
    <!-- 列表框 -->
    <div class="tables">
      <div class="tableli">
        <ul class="Uli">
          <div class="uli-left"><div class="order">订单详情</div></div>
          <div class="uli-right">
            <div>收货人</div>
            <div>状态</div>
            <div>金额</div>
            <div>操作</div>
          </div>
        </ul>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="order-goods" v-for="brand in goods" :key="brand.id">
      <div class="order-Shop">
        <div class="dataTime">{{ brand.dataTime }}</div>
        <div class="orderNumber">订单号：{{ brand.orderNumber }}</div>
        <div class="shop">{{ brand.shop }}</div>
      </div>
      <div class="goods" v-for="item in brand.commodity" :key="item.id">
        <div class="list">
          <div class="image">
            <el-image :src="item.src" style="width: 110px; height: 100px">
            </el-image>
          </div>
          <div class="order-detail">
            <el-link href="/" :underline="false">{{ item.details }}</el-link>
          </div>
        </div>
        <div class="right">
          <div class="consignee">
            <span>{{ item.consignee }}</span>
          </div>
          <div class="status">
            {{ item.status }}
          </div>
          <div class="money">
            ￥<span>{{ item.money }}</span>
          </div>
          <div class="operation">
            <el-link :underline="false" @click="handleComment"
              >追加评价</el-link
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 追加评价弹窗 -->
    <el-dialog
      title="追加评价"
      :visible.sync="dialogFormVisible"
      class="dialog"
    >
      <el-card class="box-card">
        <div class="comment">
          <div class="table">
            <el-rate v-model="value" show-text class="starlevel"> </el-rate>
            <div class="tableName">追加评论：</div>
            <div class="inputbox">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                maxlength="200"
                show-word-limit
                :rows="5"
              >
              </el-input>
            </div>
          </div>
        </div>
        <el-button class="publish" @click="handlePublish">发表评价</el-button>
      </el-card>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      textarea: '',
      value: null,
      goods: [
        {
          id: 1,
          dataTime: '2021-09-01',
          orderNumber: '217782491461',
          shop: '小米旗舰店',
          commodity: [
            {
              id: 1,
              src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded74534957d29e9f10f195061551545.jpg',
              details: '小米11 8GB+128GB 黑色',
              consignee: '张三',
              status: '已完成',
              money: '3799'
            },
            {
              id: 2,
              src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded74534957d29e9f10f195061551545.jpg',
              details: '小米11 8GB+128GB 黑色',
              consignee: '张三',
              status: '已取消',
              money: '3799'
            }
          ]
        },
        {
          id: 2,
          dataTime: '2021-09-01',
          orderNumber: '217782491461',
          shop: '花漫里',
          commodity: [
            {
              id: 1,
              src: 'https://img13.360buyimg.com/n0/s80x80_jfs/t1/115111/20/13000/95318/5f12e816Eb41dbb30/51f5b2be51425a98.jpg.dpg',
              details:
                '道袍男装中国风套装潮流汉服夏季唐装古风服装网红衣服古装三件套 黑色群鹤外搭+内搭黑L 建议100斤至128斤',
              consignee: '小花',
              status: '待付款',
              money: '179'
            }
          ]
        }
      ],
      pager: {
        pageIndex: 1,
        pageSize: 10,
        rowsTotal: 30
      }
    }
  },
  methods: {
    // 分页页面大小
    handlePageSizeChange (val) {
      this.pager.pageSize = val > 0 ? val : 1
      this.fetchData(this.pager)
    },

    // 分页页码
    handlePageIndexChange (val) {
      this.pager.pageIndex = val
      this.fetchData(this.pager)
    },
    // 追加评价
    handleComment () {
      this.dialogFormVisible = true
    },
    // 发表评价
    handlePublish () {
      this.$confirm('抱歉，此功能代开发中', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  // border: 1px solid;
  .tables {
    display: flex;
    background-color: #f3f3f3;
    .tableli {
      display: flex;
      line-height: 40px;
      .Uli {
        display: flex;
        list-style: none;
        // margin-left: 250px;
        .uli-left {
          width: 560px;
          display: flex;
          justify-content: center;
          .order {
            padding-left: 90px;
          }
        }
        .uli-right {
          display: flex;
        }
        .uli-right div {
          width: 151px;
          text-align: center;
        }
      }
    }
  }
  .block {
    float: right;
  }
}
</style>

<style lang="scss" scoped>
.order-goods {
  border: 1px solid #ccc;
  margin-bottom: 20px;
  margin-top: 20px;
  .el-link:hover {
    color: #e2231a;
  }
  .order-Shop {
    background-color: #f3f3f3;
    height: 35px;
    display: flex;
    .dataTime {
      width: 180px;
      text-align: center;
      padding-top: 7px;
      font-size: 14px;
      color: rgba(145, 144, 144, 0.932);
    }
    .orderNumber {
      width: 200px;
      text-align: center;
      padding-top: 7px;
      font-size: 14px;
      color: rgba(145, 144, 144, 0.932);
    }
    .shop {
      width: 250px;
      font-size: 15px;
      padding-top: 6px;
      text-align: center;
    }
  }
  .goods {
    display: flex;
    border: 1px solid #ccc;
    .list {
      display: flex;
      line-height: 40px;
      margin-left: 50px;
      .image {
        margin-top: 10px;
      }
      .order-detail {
        width: 385px;
        text-align: center;
      }
    }
    .right {
      display: flex;
      line-height: 40px;
      .consignee {
        // border: 1px solid #ccc;
        width: 160px;
        text-align: center;
      }
      .status {
        // border: 1px solid #ccc;
        width: 160px;
        text-align: center;
      }
      .money {
        // border: 1px solid #ccc;
        width: 160px;
        text-align: center;
        color: #e4393c;
      }
      .operation {
        // border: 1px solid #ccc;
        width: 130px;
        text-align: center;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.dialog {
  // display: flex;
  .box-card {
    .comment {
      display: flex;
      .table {
        margin-left: 20px;
        .starlevel {
          width: 160px;
          margin-bottom: 10px;
        }
        .tableName {
          padding: 3px 10px;
          margin-bottom: -1px;
          width: 85px;
          height: 25px;
          background-color: #eef8fd;
          border: 1px solid #dcf1fc;
          border-bottom: 0px;
        }
        .inputbox {
          background-color: #eef8fd;
          border: 1px solid #dcf1fc;
          border-top: 0px;
          padding: 6px;
          width: 650px;
        }
      }
    }
    .publish {
      margin-top: 10px;
      margin-left: 280px;
      width: 150px;
      background-color: #e4393c;
      color: #fff;
    }
  }
}
</style>
